<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{
				width: 200px;
				height: 200px;
				background-color: blanchedalmond;
			}
		</style>
		<script type="text/javascript">
			function demo1(){
			//获得div1的 对象
				var div = document.getElementById("div1");
			//获得元素文本内容
			//会获得里面的html中的内容，包括空白位置，里面的标签
				var inn = div.innerHTML;
			//只会获取文本内容
				var inn2 = div.innerText;
			
				//console.log(inn);
				//console.log(inn2);
				//会识别html信息
				//div.innerHTML="<h2>我们是一样的</h2>";
				//不会识别html 的信息    覆盖原先内容
				//div.innerText="<h3>我们是一样的</h3>";
				
				//在文本内容后加
				div.innerText+="我们一样的"
				
				/*注意：
				 	双标签有innerHTML和innerText
				 	单标签获得的时候都是用value获得        var val = inp.value
				 	
				 	* 特殊的标签：select     textarea
				 	* */
			}
			
			function demo2(){
				//获得select的对象
				var sele = document.getElementById("sele");
				//选择后可以直接获得选择内容     如果value中有值，就会是value中的值
				alert(sele.value);
			}
			
			function demo3(){
				var te = document.getElementById("tex");
				//获得文本中的内容
				//不可以用innerText,获取不到
				//alert(te.innerText)
				alert(te.value);
			}
		</script>
	</head>
	<body>
		<div id="div1">
			
			
			<span id="">我们不一样</span>
				
		</div>
		<input type="text" name="inp2" id="inp2" value="" />
		<!--特殊操作-->
		<!--用onchange触事件，知道是否有选择-->
		<select id="sele" onchange="demo2()">
			<option >---请选择---</option>
			<option >中国</option>
			<option >美国</option>
		</select><br />
		<!--特殊操作-->
		<textarea id="tex" rows="20" cols="20">sfsdre33</textarea>
		<input type="button" name="" id="" value="操作元素文本内容" onclick="demo3()"/>
	</body>
</html>
